<template>
    <div class="member-list">
        <div class="member-list-card">
            <div class="member-list-head">
                <Row :gutter="5" style="margin-bottom: 10px">
                    <Col span="4">
                        <Input clearable v-model="searchData.phone" placeholder="手机号" type="text"></Input>
                    </Col>
                    <Col span="4">
                        <Input clearable v-model="searchData.username" placeholder="用户名" type="text"></Input>
                    </Col>
                    <Col span="4">
                        <Input clearable v-model="searchData.real_name" placeholder="真实姓名" type="text"></Input>
                    </Col>
                    <Col span="4">
                        <Input clearable v-model="searchData.card_num" placeholder="证件号码" type="text"></Input>
                    </Col>
                    <Col span="26">
                        <ButtonGroup class="subSearch">
                            <!--<Button @click="$router.push({name:'member-add-nocache'})" type="primary" icon="plus-round">新增</Button>-->
                            <Button :loading="search_loading" @click="searchGetList" type="primary">
                                <Icon type="ios-pulse-strong"></Icon>
                                筛 选
                            </Button>
                        </ButtonGroup>
                    </Col>
                </Row>
            </div>
            <i-table height="645" stripe :columns="columns" :data="data"></i-table>
            <div style="padding: 15px;">
                <Page @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total"
                      show-elevator show-sizer :placement="'top'" :page-size="page_con"
                      :page-size-opts="[10, 15, 20, 30, 40, 50]"></Page>
            </div>
        </div>
        <!--激活-->
        <Modal v-model="modal9" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>激活确认</span>
            </p>
            <div style="text-align:center">
                <p>是否确认激活？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="sureActive">确认激活</Button>
            </div>
        </Modal>
        <!--删除-->
        <Modal v-model="modal1" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>取消确认</span>
            </p>
            <div style="text-align:center">
                <p>是否继续取消？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="del">取消</Button>
            </div>
        </Modal>

        <!--修改会员激活状态 status-->
        <Modal v-model="remarkModal" width="360">
            <p slot="header" style="text-align:center">
                <a>注意</a>
            </p>
            <div v-if="remark==1">
                1.适用于卖家已收款,但是未点击收款按钮 2.选择此操作后交易单会被完成,卖家会被扣款 如果账户内ctt不足 账号会被冻结
            </div>
            <div v-if="remark==2">
                1.适用于未打款但是点击了打款按钮 2. 选择此操作后 交易单会被取消,卖单会恢复成挂卖状态 买家会被扣款 如果账户内ctt不足 账号会被冻结
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading"
                        @click="remark==1?sureOrder(1):sureOrder(2)">{{remark==1?'确认完成订单':'确认取消订单'}}
                </Button>
            </div>
            <div style="margin-top: 10px" slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="this.remarkModal = false">取消操作
                </Button>
            </div>
        </Modal>
        <!--查看会员资金-->
        <Modal v-model="getUserMoney" width="360">
            <p slot="header" style="text-align:center">
                <a>身份信息详情</a>
            </p>
            <Form ref="formValidate" :model="formValidate" :label-width="70" style="margin-top: 20px">
                <FormItem label="用户名">
                    <Input v-model="icecream.username" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="真实姓名">
                    <Input v-model="icecream.real_name" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="性别">
                    <Input v-model="icecream.sex" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="国家">
                    <Input v-model="icecream.country" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="证件号">
                    <Input v-model="icecream.card_num" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="状态">
                    <Input v-model="getStatus" placeholder="" readonly></Input>
                </FormItem>
                <FormItem label="时间">
                    <Input v-model="getTime" placeholder="" readonly></Input>
                </FormItem>
            </Form>
            <div class="img_style">
                <img v-if="appeal.img1" :src="appeal.img1" alt="">
                <img v-if="appeal.img2" :src="appeal.img2" alt="">
                <img v-if="appeal.img3" :src="appeal.img3" alt="">
            </div>

          <!--  <div v-if="status === '0' " slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="sureOrder(1)">通过</Button>
            </div>
            <div v-if="status === '0'" slot="footer">
                <Button style="margin-top: 10px" type="error" size="large" long :loading="modal_loading"
                        @click="sureOrder(2)">拒绝
                </Button>
            </div>-->

        </Modal>
        <!--修改会员资金-->
        <Modal v-model="changeUserMoney" width="360">
            <p slot="header" style="text-align:center">
                <a>修改用户资金</a>
            </p>
            <Form :key="index" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="70"
                  style="margin-top: 20px">
                <FormItem label="资金种类" prop="change_money_type">
                    <Select clearable v-model="changeMoneyType" placeholder="资金种类">
                        <Option v-for="(money,key) in moneylist" :value="money.currency_id" :key="key">
                            {{money.money_type_name}}
                        </Option>
                        <!--<Option :value="1">本金</Option>-->
                        <!--<Option :value="2">积分</Option>-->
                    </Select>
                </FormItem>
                <!--<FormItem label="资金种类" prop="change_money_type">-->
                <!--<RadioGroup v-model="formValidate.change_money_type">-->
                <!--<Radio label="1">本金</Radio>-->
                <!--<Radio label="2">积分</Radio>-->
                <!--</RadioGroup>-->
                <!--</FormItem>-->
                <FormItem label="增加/减少" prop="inc_type">
                    <RadioGroup v-model="formValidate.inc_type">
                        <Radio label="1">增加</Radio>
                        <Radio label="2">减少</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="更改数量" prop="num">
                    <Input v-model="formValidate.num" placeholder="请输入数量"></Input>
                </FormItem>

            </Form>
            <Input type="text" placeholder="备注" v-model="formValidate.remark"></Input>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="changeMoney">修改</Button>
            </div>
        </Modal>
        <Modal v-model="get_myteam" width="360">
            <p slot="header" style="text-align:center">
                <a>修改会员等级</a>
            </p>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="70"
                  style="margin-top: 20px">
                <FormItem label="级别" prop="level">
                    <RadioGroup v-model="formValidate.level">
                        <Radio label="1">vip会员</Radio>
                        <Radio label="2">金卡会员</Radio>
                        <Radio label="3">钻石会员</Radio>
                        <Radio label="4">红钻会员</Radio>
                        <Radio label="5">皇钻会员</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="changeLevel">确定</Button>
            </div>
        </Modal>

        <Modal v-model="viewImgModal" title="图片">
            <img :src="viewImgUrl" alt="" style="width: 100%">
        </Modal>
    </div>
</template>
<script>
    export default {
        name: "trueName-list",
        data() {
            return {
                moneylist: [],

                viewImgUrl: '',
                viewImgModal: false,
                columns: [
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align: "center",
                    },
                    // {
                    //     title: '登录名',
                    //     key: 'loginname',
                    //     align:"center",
                    // },
                    {
                        title: '用户名',
                        key: 'username',
                        align: "center",
                    },
                    {
                        title: '真实姓名',
                        key: 'real_name',
                        align: "center",
                    },


                    // {
                    //     title: '激活状态',
                    //     key: 'is_jihuo',
                    //     align: "center",
                    //     render: (h, params) => {
                    //         return ` ${params.row.is_jihuo == 1 ? '已激活' : '未激活'}`
                    //     }
                    // },


                    // {
                    //     title: '等级',
                    //     key: 'tuijian_id',
                    //     align:"center",
                    //     render:(h,params)=>{
                    //         if(params.row.vip==0&&params.row.svip==0){
                    //             return "会员"
                    //         }else if(params.row.vip==1&&params.row.svip==0){
                    //             return "代理"
                    //         }else if(params.row.vip==1&&params.row.svip==1){
                    //             return "金牌代理"
                    //         }else if(params.row.vip==0&&params.row.svip==1){
                    //             return "金牌代理"
                    //         }
                    //     }
                    // },
                    // {
                    //     title: '会员等级',
                    //     key: 'level_name',
                    //     align: "center",
                    // },
                    {
                        title: '证件号',
                        key: 'card_num',
                        align: "center",
                    },
                    {
                        title: '时间',
                        key: 'add_time',
                        align: "center",
                        render: (h, params) => {
                            return this.timeFormat(params.row.add_time)
                        }
                    },
                    {
                        title: '状态',
                        key: 'status',
                        align: "center",
                        render: (h, params) => {
                            if (params.row.status == 0) {
                                return '待审核'
                            }
                            else if (params.row.status == 1) {
                                return '已通过'
                            }
                            else if (params.row.status == 2) {
                                return '已拒绝'
                            }
                        }
                    },
                    // {
                    //     title: '是否为区代',
                    //     key: 'is_daili',
                    //     width:100,
                    //     align:"center",
                    //     render:(h,params)=>{
                    //         if(params.row.is_daili==1){
                    //             return h("Icon",
                    //                 {
                    //                     props:{
                    //                         type:"checkmark-round",
                    //                         color:"green",
                    //                     }
                    //                 }
                    //             )
                    //         }else{
                    //             return h("Icon",
                    //                 {
                    //                     props:{
                    //                         type:"close-round",
                    //                         color:"red",
                    //                     }
                    //                 }
                    //             )
                    //         }
                    //     }
                    // },
                    // {
                    //     title: '是否启用',
                    //     key: 'userstatus',
                    //     width:100,
                    //     align:"center",
                    //     render:(h,params)=>{
                    //         if(params.row.userstatus==1){
                    //             return h("Icon",
                    //                 {
                    //                     props:{
                    //                         type:"checkmark-round",
                    //                         color:"green",
                    //                     }
                    //                 }
                    //             )
                    //         }else{
                    //             return h("Icon",
                    //                 {
                    //                     props:{
                    //                         type:"close-round",
                    //                         color:"red",
                    //                     }
                    //                 }
                    //             )
                    //         }
                    //     }
                    // },
                    // {
                    //     title: '是否为团队长',
                    //     key: 'tuandui',
                    //     width:115,
                    //     align:"center",
                    //     render:(h,params)=>{
                    //         if(params.row.tuandui==1){
                    //             return h("Icon",
                    //                 {
                    //                     props:{
                    //                         type:"checkmark-round",
                    //                         color:"green",
                    //                     }
                    //                 }
                    //             )
                    //         }else{
                    //             return h("Icon",
                    //                 {
                    //                     props:{
                    //                         type:"close-round",
                    //                         color:"red",
                    //                     }
                    //                 }
                    //             )
                    //         }
                    //     }
                    // },
                    // {
                    //     title: '生日',
                    //     key: 'birthday',
                    //     align: "center",
                    //     render: ((h, params) => {
                    //         if (params.row.year == '1880') {
                    //             return '暂无'
                    //         }
                    //         else {
                    //             return this.birthday = params.row.year + "-" + params.row.month + '-' + params.row.day
                    //         }
                    //     })
                    // },
                    {
                        title: '手持身份证',
                        key: 'action',
                        align: 'center',
                        width: 250,
                        render: (h, params) => {
                            return h('img', {
                                attrs: {
                                    src: params.row.card_shou
                                },
                                style: {
                                    width: "100px",
                                    cursor: 'pointer'
                                },
                                on: {
                                    click:()=> {
                                        this.viewImage(params.row.card_shou);
                                    }
                                }
                            })
                        }
                    },
                    {
                        title: '身份证正面',
                        key: 'action',
                        align: 'center',
                        width: 250,
                        render: (h, params) => {
                            return h('img', {
                                attrs: {
                                    src: params.row.card_zheng
                                },
                                style: {
                                    width: "100px",
                                    cursor: 'pointer'
                                },
                                on: {
                                    click:()=> {
                                        this.viewImage(params.row.card_zheng);
                                    }
                                }
                            })
                        }
                    },
                    {
                        title: '身份证反面',
                        key: 'action',
                        align: 'center',
                        width: 250,
                        render: (h, params) => {
                            return h('img', {
                                attrs: {
                                    src: params.row.card_fan
                                },
                                style: {
                                    width: "100px",
                                    cursor: 'pointer'
                                },
                                on: {
                                    click:()=> {
                                        this.viewImage(params.row.card_fan);
                                    }
                                }
                            })
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width: 250,
                        render: (h, params) => {
                            if (params.row.status == 0){
                                return h("div", [
                                    h("ButtonGroup", {
                                        style: {
                                            marginTop: "5px"
                                        }
                                    }, [
                                        h("Button", {
                                            props: {
                                                type: "primary"
                                            },
                                            on: {
                                                click: () => {
                                                    this.tongguo(params.row.id)
                                                }
                                            }
                                        }, "通过"),
                                        h("Button", {
                                            props: {
                                                type: "primary"
                                            },
                                            on: {
                                                click: () => {
                                                    this.jujue(params.row.id)
                                                }
                                            }
                                        }, "拒绝"),
                                    ]),
                                    h("ButtonGroup", {
                                        style: {
                                            margin: "5px 0px"
                                        }
                                    }, [
                                    ])
                                ])
                            }
                            return '暂无操作';
                        }
                    }
                ],
                coinList: [],
                data: [],
                total: 0,
                index: 1,
                page_con: 15,
                searchData: {
                    phone: '',
                    username: '',
                    real_name: '',
                    card_num: '',
                    status: '',
                    buy_name: '',
                    sell_name: '',
                    buy_status: '',
                    sell_status: '',
                    timeStartEnd: [],//两个时间内的赛选
                    loginName: "",//
                    userName: "",
                    userPhone: "",//
                    userType: "",
                    sort: "",
                    userStatus: "",
                    svip: "",
                    is_daili: "",
                    uid: '',
                    email: '',
                    userLevel: '',
                    activeState: '',
                    id: '',
                },
                appeal: {
                    username: '',
                    content: '',
                    img1: '',
                    img2: '',
                    img3: '',
                },
                remark: '',
                order_type: '',
                moneyTypeList: [],
                changeMoneyType: '',
                search_loading: false,
                id: "",
                type: 1,
                modal1: false,
                modal2: false,
                modal3: false,
                modal4: false,
                modal5: false,
                modal9: false,
                pay_type: '',
                getStatus: '',
                getTime: '',
                remarkModal: false,
                status: '',
                memberstatus: false,
                getUserMoney: false,
                modal_loading: false,
                changeUserMoney: false,
                get_myteam: false,
                icecream: [],
                formValidate: {
                    level: "",
                    status: "",
                    money: '',
                    change_money_type: '1',
                    inc_type: '1',
                    num: '',
                    remark: ''
                },
                ruleValidate: {
                    level: [{required: true, message: '请选择激活状态', trigger: 'change'}],
                    ststus: [{required: true, message: '请选择会员等级', trigger: 'change'}],
                    money: [{required: false, message: '请输入资金金额', trigger: 'blur'}],
                    change_money_type: [{required: true, message: '请选择资金种类', trigger: 'change'}],
                    inc_type: [{required: true, message: '请选择增加/减少', trigger: 'change'}],
                    num: [{required: true, message: '请输入资金金额', trigger: 'blur'}],
                    remark: [{required: false, message: '请输入备注', trigger: 'blur'}],
                },
                formValidateAgent: {
                    areaId1: "",
                    areaId2: "",
                    areaId3: "",
                    tuijian: "",
                    type: "",
                },
                ruleValidateAgent: {
                    areaId1: [{required: true, message: '请选择省', trigger: 'change'}],
                    areaId2: [{required: true, message: '请选择市', trigger: 'change'}],
                    areaId3: [{required: true, message: '请选择县', trigger: 'change'}],
                    tuijian: [{required: true, message: '请输入推荐人', trigger: 'blur'}],
                    type: [{required: true, message: '请选择类型', trigger: 'change'}],
                },
                areaId1List: [],//省级
                areaId2List: [],//市级
                areaId3List: [],//县
            }
        },
        activated() {
            this.getOrderList()
        },
        methods: {
            getOrderList() {
                this.getJsonData("User/authList", {
                    phone: this.searchData.phone,
                    status: this.searchData.status,
                    buy_status: this.searchData.buy_status,
                    sell_status: this.searchData.sell_status,
                    buy_name: this.searchData.buy_name,
                    sell_name: this.searchData.sell_name,
                    id: this.searchData.id,
                    type: this.searchData.type,
                    username: this.searchData.username,
                    real_name: this.searchData.real_name,
                    card_num: this.searchData.card_num,

                }, true)
                    .then((res) => {
                        this.data = res.data
                        this.total = parseInt(res.count)
                        this.search_loading = false
                    })
                    .catch((res) => {
                        this.search_loading = false
                    })
            },
            changePage(n) {
                this.index = n
                this.getOrderList()
            },
            changeTiao(num) {
                this.page_con = num
                this.index = 1
                this.getOrderList()
            },
            searchGetList() {
                this.search_loading = true
                this.index = 1
                this.getOrderList()
            },
            //删除
            del() {
                this.modal_loading = true;
                this.getJsonData("Trade/cancelMatchUp", {
                    trade_id: this.searchData.id,
                    type: this.order_type,
                    id: this.uid
                }, true)
                    .then((res) => {
                        this.getOrderList()
                        this.modal_loading = false;
                        this.modal1 = false;
                        this.$Message.success('取消成功');
                    }).catch((res) => {
                    this.modal_loading = false;
                    this.modal1 = false;
                })
            },
            //修改会员等级
            changeLevel() {
                this.sureChangeLevel()
            },
            //确认修改
            sureChangeLevel() {
                this.modal_loading = true;
                this.getJsonData("User/setUserLevel", {
                    uid: this.uid,
                    level: this.formValidate.level,
                }, true)
                    .then((res) => {
                        this.getOrderList()
                        this.modal_loading = false;
                        this.modal4 = false;
                        this.$Message.success("修改成功");
                    }).catch((res) => {
                    this.modal_loading = false;
                    this.modal4 = false;
                })
            },
            //修改会员等级
            changeStatus() {
                this.sureChangeStatus()
            },
            //确认修改
            sureChangeStatus() {
                this.modal_loading = true;
                this.getJsonData("User/setUserStatus", {
                    uid: this.uid,
                    status: this.formValidate.status,
                }, true)
                    .then((res) => {
                        this.getOrderList()
                        this.modal_loading = false;
                        this.memberstatus = false;
                        this.$Message.success("修改成功");
                    }).catch((res) => {
                    this.modal_loading = false;
                    this.memberstatus = false;
                })
            },
            //修改用户资金
            changeMoney() {
                this.sureChangeMoney()
            },
            //确认修改
            tongguo(id){
                this.getJsonData("User/authAdopt", {
                    id: id,
                }, true)
                    .then((res) => {
                        this.getOrderList()
                        this.$Message.success("已通过");
                    })
            },
            jujue(id){
                this.getJsonData("User/authRefuse", {
                    id: id,
                }, true)
                    .then((res) => {
                        this.getOrderList()
                        this.$Message.success("已通过");
                    })
            },
            sureOrder(n) {
                if (n == 1) {
                    this.modal_loading = true;
                    this.getJsonData("User/authAdopt", {
                        id: this.id,
                    }, true)
                        .then((res) => {
                            this.getOrderList()
                            this.modal_loading = false;
                            this.getUserMoney = false;
                            this.$Message.success("已通过");
                        }).catch((res) => {
                        this.modal_loading = false;
                        this.getUserMoney = false;
                    })
                }
                if (n == 2) {
                    this.modal_loading = true;
                    this.getJsonData("User/authRefuse", {
                        id: this.id,
                    }, true)
                        .then((res) => {
                            this.getOrderList()
                            this.modal_loading = false;
                            this.getUserMoney = false;
                            this.$Message.success("已拒绝");
                        }).catch((res) => {
                        this.modal_loading = false;
                        this.getUserMoney = false;
                    })
                }
            },
            //弹出设为代理获取升级列表
            //获取市
            getAreaId2() {
                if (this.formValidateAgent.areaId1 !== "") {
                    this.getJsonData("Areas/getAreas", {parentId: this.formValidateAgent.areaId1})
                        .then((res) => {
                            this.areaId2List = res.data
                        })
                } else {
                    this.areaId2List = []
                    this.areaId3List = []
                }
            },
            //获取县
            getAreaId3() {
                if (this.formValidateAgent.areaId2 !== "") {
                    this.getJsonData("Areas/getAreas", {parentId: this.formValidateAgent.areaId2})
                        .then((res) => {
                            this.areaId3List = res.data
                        })
                } else {
                    this.areaId3List = []
                }
            },
            //设为代理
            setAgent() {
                this.$refs.formValidateAgent.validate((valid) => {
                    if (valid) {
                        this.surSetAgent()
                    }
                })
            },
            //确认设为代理
            surSetAgent() {
                this.modal_loading = true;
                this.getJsonData("Users/addAgent", {
                    userId: this.id,
                    is_yuding: this.formValidateAgent.type,
                    tuijian: this.formValidateAgent.tuijian,
                    consignee_add_countyId: this.formValidateAgent.areaId1,
                    consignee_add_countyId2: this.formValidateAgent.areaId2,
                    consignee_add_countyId3: this.formValidateAgent.areaId3,
                }, true)
                    .then((res) => {
                        this.getOrderList()
                        this.modal_loading = false;
                        this.modal5 = false;
                        this.$Message.success("设置成功");
                    }).catch((res) => {
                    this.modal_loading = false;
                    this.modal5 = false;
                })
            },
            reset() {
                this.$refs.formValidateAgent.resetFields();
            },
            sureActive() {
                this.modal_loading = true;
                this.getJsonData("User/jihuo", {uid: this.uid}, true)
                    .then((res) => {
                        this.getOrderList()
                        this.modal_loading = false;
                        this.modal9 = false;
                        this.$Message.success('激活成功');
                    }).catch((res) => {
                    this.modal_loading = false;
                    this.modal9 = false;
                })
            },
            openRemark(n) {
                this.remark = n
                this.getUserMoney = false
                setTimeout(() => {
                    this.remarkModal = true
                }, 100)
            },
            viewImage(img) {
                this.viewImgUrl = img;
                this.viewImgModal = true;
            }
        },

    }
</script>
<style lang="less">
    @import "trueName-list";
</style>
